<div class="layui-fluid layui-col-md12" lay-title="编辑友链">
  <div class="layui-card">
    <div class="layui-card-body" style="padding: 15px;">
      <form class="layui-form" action="" lay-filter="form-group">
        <input type="text" name="id" style="display:none">
        <input type="text" name="spread_id" style="display:none">
        <div class="layui-form-item">
          <label class="layui-form-label">友链名称</label>
          <div class="layui-input-block">
            <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="请输入友链名称"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">友链网址</label>
          <div class="layui-input-block">
            <input type="text" name="url" lay-verify="url" autocomplete="off" placeholder="https://"
              class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">友链Logo</label>
          <div class="layui-input-block">
            <input type="text" name="pic" lay-verify="url" autocomplete="off" placeholder="https://" class="layui-input"
              style="vertical-align:middle;position: absolute;"><img id="pic_show" src=""
              style="height:36px;display:none;vertical-align:middle;position:absolute;right:0;">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">排序</label>
          <div class="layui-input-block">
            <input type="number" name="sort" autocomplete="off" placeholder="1" class="layui-input">
          </div>
        </div>
        <div class="layui-form-item">
          <label class="layui-form-label">是否公开</label>
          <div class="layui-input-block">
            <input type="checkbox" name="status" lay-skin="switch" lay-text="ON|OFF">
          </div>
        </div>
        <div class="layui-form-item layui-form-text">
          <label class="layui-form-label">友链介绍</label>
          <div class="layui-input-block">
            <textarea name="texts" id="texts" placeholder="友链介绍" class="layui-textarea"></textarea>
          </div>
        </div>
        <div class="layui-form-item">
          <div class="layui-input-block">
            <button class="layui-btn" lay-submit="" lay-filter="sublink-submit">立即提交</button>
            <button type="reset" class="layui-btn layui-btn-primary">重置</button>
          </div>
        </div>
      </form>
    </div>
  </div>
</div>
<script>
  //判断链接图片是否存在
  var $ = layui.$;

  function validateImage(pathImg) {
    var ImgObj = new Image();
    ImgObj.src = pathImg;
    if (ImgObj.fileSize > 0 || (ImgObj.width > 0 && ImgObj.height > 0)) {
      return true;
    } else {
      return false;
    }
  }
  var pic_obj = $('input[name="pic"]');
  function show_pic() {
    let pic = pic_obj.val();
    if (validateImage(pic)) {
      $("#pic_show").attr('src', pic);
      $("#pic_show").show();
    } else {
      $("#pic_show").hide();
    }
  }
  pic_obj.click(function () {
    show_pic();
  });
  pic_obj.change(function () {
    show_pic();
  });
  pic_obj.blur(function () {
    show_pic();
  });
  pic_obj.mouseleave(function () {
    show_pic();
  });
</script>
<script>
  layui.use(['admin', 'form', 'laydate'], function () {
    var $ = layui.$,
      admin = layui.admin,
      element = layui.element,
      layer = layui.layer,
      laydate = layui.laydate,
      router = layui.router(),
      form = layui.form;
    form.render(null, 'form-group');
    // 拉取友链详情
    if (router.search.id) {
      admin.get({
        url: layui.api.links + 'get?id=' + router.search.id,
        async: false,
        success: function (result) {
          let res = result.data;
          let status = res.status;
          $('input[name="id"]').val(res.id);
          if (status == 1) {
            $("input[name='status']").prop("checked", true);
          } else {
            $("input[name='status']").prop("checked", false);
          }
          $('input[name="title"]').val(res.title);
          $('input[name="url"]').val(res.url);
          $('input[name="pic"]').val(res.pic);
          $('input[name="spread_id"]').val(res.spread_id);
          $('input[name="sort"]').val(res.sort);
          $('#texts').val(res.texts);
          show_pic();
          form.render(null, 'form-group');
        }
      });
    } else {
      if (router.search.spread_id) {
        $('input[name="spread_id"]').val(router.search.spread_id);
      }
      layui.view.setTitle('新增友链', router.href);
    }

    /* 自定义验证规则 */
    form.verify({
      title: function (value) {
        if (value.length < 1) {
          return '名称至少得1个字符啊';
        }
      }
    });

    /* 监听提交 */
    form.on('submit(sublink-submit)', function (data) {
      /** 屏蔽回车 **/
      var theEvent = window.event;
      var code = theEvent.keyCode || theEvent.which || theEvent.charCode;
      if (code == 13) {
        return false;
      }
      let datas = data.field;
      if (!datas.status) {
        datas.status = 2;
      } else {
        datas.status = 1;
      }
	  var time = Math.round(new Date().getTime() / 1000).toString();
			
	  if (!router.search.id) {
          datas.cdat = time;
	  }
      // 这一段是用于判断是否有相同的值的
      datas.onlykey = 'title';
      datas.onlyname = datas.title;
      console.log(datas);
      admin.post({
        url: layui.api.links + 'save',
        type: 'post',
        data: datas,
        success: function (result) {
          layer.alert(result.msg, {
            title: '提交提示'
          }, function () {
            // 这里加上时间戳,刷新页面
            admin.navigate('/list/links/time=' + time);
          });

        }
      });
      return false;
    });
  });
</script>